<template>
  <div class="home">
    <el-row class="top" :gutter="20">
      <el-col :span="6">
        <el-card class="top_info">
          <h1>IP：{{ admin.ip }}</h1>
          <h2>当前: {{ admin.name }}</h2>
        </el-card>
      </el-col>
      <el-col :span="6" v-for="(item, index) in list" :key="index">
        <el-card class="top_info">
          <h1>{{ item.title }}:</h1>
          <h2>{{ item.key || item.num }}</h2>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="chart">
      <EchartsPie :data="tagPie" />
    </el-card>

    <el-card class="chart">
      <EchartsBar :data="articleBar" />
    </el-card>
  </div>
</template>

<script>
import EchartsBar from '@/views/echarts/EchartsBar'
import EchartsPie from '@/views/echarts/EchartsPie'
export default {
  name: 'Home',
  components: {
    EchartsBar,
    EchartsPie,
  },
  data() {
    return {
      // 各月份文章数
      articleBar: [],
      tagPie: [],
      admin: {
        userId: '',
        name: '',
        ip: ''
      },
      list: {
        user: {
          title: '访问人次',
          num: 0,
        },
        article: {
          title: '文章数',
          num: 0,
        },
        msg: {
          title: '我的消息',
          num: 0,
        },
      },
    }
  },
  created() {
    this.init()

    this.getArticles()
    this.getPieData()
    this.getBarData()
  },
  methods: {
    // 获取管理员信息
    init() {
      const token = this.$storage.getSession('token')

      // 获取用户
      if(token){
        this.$api.httpLoginToken(token).then((res) => {
          if (res.code == 200) {
            this.admin.name = res.data.user.name
            this.admin.userId = res.data.user.userId
          }
        })
      }

      // 获取ip
      this.$api.httpGetIP().then((res) => {
        if (res.code == 200) {
          this.admin.ip = res.data.ip
        }
      })
      // 访问人次
      this.$api.httpIPLog().then((res) => {
        if (res.code == 200) {
          this.list.user.num = res.data.meta.count || 0
        }
      })
      // 新消息
      this.$api.httpUserReply(this.admin.userId).then((res) => {
        if (res.code === 200) {
          this.list.msg.num = res.data.length || 0
        }
      })
    },
    // 文章条形图数据
    getBarData() {
      this.$api.httpArticleBar().then((res) => {
        if (res.code == 200) {
          let data = res.data
          data.forEach((item) => {
            this.articleBar.push(item.count)
          })
        }
      })
    },
    // 标签饼形数据
    getPieData() {
      this.$api.httpTagList().then((res) => {
        if (res.code == 200) {
          let data = res.data
          data.forEach((item) => {
            this.tagPie.push({ value: item.articleCount, name: item.name })
          })
        }
      })
    },
    // 文章信息
    getArticles() {
      this.$api.httpArticleList().then((res) => {
        if (res.code === 200) {
          this.list.article.num = res.data.meta.count
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;

  .chart {
    margin-top: 14px;
    width: 100%;
    // height: 400px;
  }
}
</style>